<template>
  <div>
    <h1>对触发事件的参数进行验证</h1>
    <p>{{ tle }}</p>
    <p>{{ user }}</p>
    <p>{{ msg }}</p>

    <hr />

    <button type="button" @click="editTitle">
      emit触发父组件绑定子组件上的函数2(修改title的值)
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

export interface Iuser {
  name: string
  sex: string
  age: number
}

const emit = defineEmits({
  submit(payload: { email: string; password: string }) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
    if (payload.email === payload.password) {
      return true
    }
    return false
  },
  submit2(payload: { email: string; password: string }) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
    return true
  }
})

// const props = defineProps<{
//   title: string
//   user: Iuser
//   msg?: string
// }>()

// 响应式 Props 解构 3.5
const {
  title = '江山如此多娇,引无数英雄竞折腰',
  msg,
  user
} = defineProps<{
  title?: string
  user: Iuser
  msg?: string
}>()

const tle = ref(title)

const editTitle = () => {
  tle.value = '数风流人物,还看今朝'
  emit('submit', { email: '22', password: '22' })
}
</script>

<style></style>
